import { StyleSheet, Text, View } from 'react-native'
import Divide from '../commonComponents/divide'
export default function MyFlex(): JSX.Element {
  return (
    <View style={{ width: '100%', height: 'auto' }}>
      <View style={stylesMyFlex.Container}>
        <View style={stylesMyFlex.child1}>
          <Text>1</Text>
        </View>
        <View style={stylesMyFlex.child2}>
          <Text>2</Text>
        </View>
        <View style={stylesMyFlex.child3}>
          <Text>33</Text>
        </View>
      </View>
    </View>
  )
}

const stylesMyFlex = StyleSheet.create({
  Container: {
    flexDirection: 'row',
    backgroundColor: '#f1f1f1',
    height: 300,
    width: '100%',
    marginTop: 300,

    justifyContent: 'center',
    alignItems: 'center',
    borderStyle: 'solid',
    borderColor: 'red',
    borderWidth: 1
  },
  child1: {
    width: 80,
    height: 80,
    backgroundColor: 'pink',

    marginRight: 5
    // flex: 1,
  },
  child2: {
    width: 140,
    height: 140,
    marginRight: 5,
    backgroundColor: 'pink',
    // flex: 1,
    flexShrink: 1
  },
  child3: {
    width: 200,
    height: 200,
    backgroundColor: 'pink'
    // flex: 1,
  },
})
